import React, { DetailedHTMLProps, HTMLAttributes, useMemo, useRef, useState } from 'react';
import { StyledTable } from './style';
import { useScroll } from 'ahooks';

const Table = () => {
  const headRef = useRef<HTMLDivElement>();
  const tableRef = useRef<HTMLDivElement>();
  const position = useScroll(document);
  const thStyle = useMemo<HTMLAttributes<HTMLDivElement>>(() => {
    const headerHeight = headRef.current?.offsetHeight || 0;
    const top = tableRef.current?.offsetTop - position?.top - headerHeight;
    const left = tableRef.current?.offsetLeft || 0;
    if (top <= 0 && Math.abs(top) < tableRef.current?.offsetHeight - 100) {
      return {
        top: headerHeight,
        left,
        position: 'fixed'
      } as HTMLAttributes<HTMLDivElement>;
    }
    return null;
  }, [position?.top]);
  return (
    <div>
      <div style={{ height: '200px' }}>sss</div>
      <div style={{ height: '100px', background: 'black', position: 'fixed', top: 0, width: '555px', zIndex: '2222' }}
           ref={headRef}>www
      </div>
      <StyledTable ref={tableRef}>
        <div className={'table-head'} style={thStyle}>
          {JSON.stringify(position)}
        </div>
      </StyledTable>
      <div style={{ height: '1000px' }}> {JSON.stringify(position)}</div>
    </div>
  );
};


export default Table;